<template>
  <el-watermark :font="font" :content="content">
    <div id="app" style="height: 1000px;">
      <navgition/>
      <carousel/>
      <lay-notice-bar leftIcon="layui-icon-release" rightIcon="layui-icon-close" text="事情总是会自动变化。顺其自然就好。" mode="closeable" background="#ecf5ff"	></lay-notice-bar>
      <content-home/>
    </div>
  </el-watermark>

</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background: var(--body-color);
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
<script setup lang="ts">
import Navgition from "@/components/Navgition.vue";
import { reactive, watch } from 'vue'
import { isDark, toggleDark } from '@/composables/dark';
import Carousel from "@/components/carousel/Carousel.vue";
import ContentHome from "@/components/ContentHome.vue";
import Toast from "@/components/toast/index.vue";
import footer from "@/components/layout/Footer.vue";
const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})
const content = ['221321024', '张江涛']
watch(
    isDark,
    () => {
      font.color = isDark.value
          ? 'rgba(255, 255, 255, .15)'
          : 'rgba(0, 0, 0, .15)'
    },
    {
      immediate: true,
    }
)

</script>